<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <title>导航资源表单</title>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <ul class="nav nav-tabs" role="tablist" id="tab-option">
                <li class="active" role="presentation">
                    <a data-toggle="tab" href="#baseInfo" aria-controls="exampleTabsInverseOne" role="tab" aria-expanded="true">
                        导航信息
                    </a>
                </li>
                <li role="presentation" class="">
                    <a data-toggle="tab" href="#buttonInfo" aria-controls="exampleTabsInverseTwo" role="tab" aria-expanded="false">
                        按钮信息
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-content">
        <!--基本信息-->
        <div class="tab-pane active" id="baseInfo" role="tabpanel">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <!--按钮栏-->
                    <div class="form-group button-bar button-bar">
                        <button type="button" isShow="joForm.isAdd" class="btn btn-primary" onclick="joForm.save()">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;新增
                        </button>
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-info" onclick="joForm.update()">
                            <i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;修改
                        </button>
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-danger" onclick="joForm.del()">
                            <i class="fa fa-trash" aria-hidden="true"></i>&nbsp;删除
                        </button>
                    </div>
                    <!--按钮栏-->
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <form id="pageForm" name="pageForm" action="" method="post">
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">资源编号</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="id" value="" class="form-control readonly-edit" placeholder="请输入正确的资源编号,为空则使用系统默认编号" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 must">
                            <div class="young-form-label">资源名称</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="name" value="" class="form-control "  ErrEmpty="资源名称不允许为空" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">链接</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <!--<input type="text"   name="href" value="" class="form-control "   />-->
                                <div class="container-fluid" style="margin: 0px;padding: 0px;">
                                    <div class="row" style="margin: 0px;padding: 0px;">
                                        <div class="col-xs-9" style="margin: 0px;padding: 0px;">
                                            <input type="text" name="href" class="form-control col-xs-9" id="href" placeholder="页面URL,例如:/page/demo/layout.html">
                                        </div>
                                        <div class="col-xs-3" style="margin: 0px;padding: 0px;">
                                            <select class="form-control col-xs-3" onchange="setHref(this.value)" style="margin: 0px;padding: 0px 5px;">
                                                <option value="">方法提示</option>
                                                <option value="openPageOnMain('http://')">右侧窗口打开</option>
                                                <option value="newWindow('http://')">新窗口打开</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">父节点</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <div class="input-group">
                                    <input type="text" id="parentId" name="parentId" class="form-control">
                                    <!--<input type="text" id="parentName" name="parentName" class="form-control">-->
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="choiceNavigate('parentId', 'parentName', false)">
                                    <i class="fa fa-bars" aria-hidden="true"></i>&nbsp;选择
                                </button>
                            </span>
                                </div>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">图标</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <!--<input type="text"   name="icon" value="" class="form-control "   />-->
                                <div class="input-group">
                                    <span id="iconShow" class="input-group-addon" style="width: 30px;"></span>
                                    <input type="text" id="icon" name="icon" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="choiceIcon('icon', iconSelectClick)">
                                    <i class="fa fa-bars" aria-hidden="true"></i>&nbsp;选择
                                </button>
                            </span>
                                </div>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 must">
                            <div class="young-form-label">资源类型</div>
                            <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('导航资源:菜单类型资源;普通页面:不用在菜单中的页面;逻辑资源:逻辑上成立的资源,可以不是一个具体的页面(例如动态生成的页面)',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                            <div class="young-form-input-block">
                                <select name="type" class="form-control" ErrEmpty="资源类型不允许为空" >
                                    <option value=""></option>
                                    <option value="1" selected="selected">导航资源</option>
                                    <option value="2">普通页面</option>
                                    <option value="3">逻辑资源</option>
                                </select>
                            </div>
                        </div>

                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">显示顺序</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="num" value="100" class="form-control "  ErrNumber="显示顺序需填写数字类型" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">说明</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="remark" value="" class="form-control "   />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">归属项目</div>
                            <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('该资源归属应用',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                            <div class="young-form-input-block">
                                <input type="text" id="app" value="" name="app" class="joInput form-control "   />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">层级</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="navLevel" value="" class="form-control " readonly ErrNumber="层级需填写数字类型" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">创建单位</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="companyId" value="" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">创建时间</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="createTime" value="" name="createTime" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">更新时间</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="updateTime" value="" name="updateTime" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">创建人</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="createUserId" value="" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">更新人</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="updateUserId" value="" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">删除标识</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <select name="trashFlag" value="0" class="form-control" ErrNumber="删除标识需填写数字类型" readonly >
                                    <option value=""></option>
                                    <option value="0">有效</option>
                                    <option value="1">已删除</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <!--按钮信息-->
        <div class="tab-pane" id="buttonInfo" role="tabpanel">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <!--按钮栏-->
                    <div class="form-group button-bar button-bar">
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-info" onclick="relevanceButton()">
                            <i class="fa fa-exchange" aria-hidden="true"></i>&nbsp;关联已有按钮
                        </button>
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-primary" onclick="createButton()">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;创建新按钮
                        </button>
                    </div>
                    <!--按钮栏-->
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="mainList" titleCss="jo-view-table-header" trHandle="itemHandle">
                            <col field="_show" title="按钮预览" width="12%" align=""  />
                            <col field="click" title="点击事件" width="20%" align=""  />
                            <col field="display" title="显示条件" width="10%" align=""  />
                            <col field="trashFlag" title="状态" width="10%" align=""  />
                            <col field="num" title="顺序" width="10%" align=""  order="num"/>
                            <col field="_opt" title="操作" width="14%" align=""/>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">
    JoInputSimple('app', 'young,young2.0,business');//初始化输入选择框
    //关联用户
    function relevanceButton(){
        if(!joForm.formData.id){
            jo.showMsg('无效的导航编号', {icon:0});
            return;
        }
        jo.showDialog('<ul class="ztree" id="buttonTreeWin"></ul>', 'buttonTreeWin', true, {title:'选择按钮', area:['400px','450px'], btn:["确定", "取消"], btnAlign:'c', success:function(){
            createButtonTree('buttonTreeWin', null, true);//创建可选的单位用户树
        }, btn1: function(idx){
            var checkedNodes = jo.getZTreeCheckedNodes('buttonTreeWin');
            var ids = '';//勾选的按钮id
            for(var i=0;i<checkedNodes.length;i++){
                var node = checkedNodes[i];
                if(node.nodeType == 'BUTTON'){
                    ids += ',' + node.id;
                }
            }
            if(ids){
                ids = ids.substring(1);
            }
            if(!ids){
                jo.showMsg('请选择待添加的按钮', {icon:0});
                return;
            }
            jo.postAjax('{URL_UMS}ums/navigateButton/relevanceButton2Navigate', {navigateId:joForm.formData.id, buttonIds:ids}, function(json){
                if(json && json.code == 0){
                    jo.showMsg('关联成功', {icon:1});
                    loadButtonData();//成功后重新加载按钮信息
                }else if(json && json.code == -1){
                    jo.showMsg(json.info, {icon:2});
                }else{
                    jo.showMsg('关联失败', {icon:2});
                }
            }, true);
            jo.close(idx);
        }});
    }
    //按钮行处理
    function itemHandle(oItem){
        oItem.trashFlag = formatButtonState(oItem.trashFlag);
        oItem._show = '<button type="button" isShow="" class="btn-sm '+oItem.buttonClass+'" onclick=""><i class="fa '+oItem.icon+'"></i>&nbsp;'+oItem.name+'</button>';
        oItem._opt = '<button type="button" class="btn btn-sm btn-primary" onclick="editButton(\''+oItem.id+'\')"> <i class="fa fa-paint-brush" aria-hidden="true"></i>&nbsp;编辑</button>';
        oItem._opt += '&nbsp;<button type="button" class="btn btn-sm btn-danger" onclick="delNavButton(\''+oItem.id+'\',\''+oItem.name+'\')"> <i class="fa fa-remove" aria-hidden="true"></i>&nbsp;移除</button>';
    }
    //创建按钮
    function createButton(){
        if(joForm.formData.id){
            jo.showWin('/page/ums/buttonFormAtNavForm.html?navigateId='+joForm.formData.id, '80%', '80%', '编辑按钮', 'WIN_ADD_BUTTON');
        }else{
            jo.showMsg('获取导航编号失败', {icon:2});
        }
    }
    //删除导航下的按钮
    function delNavButton(id, name){
        if(id && joForm.formData.id){
            jo.confirm('确定要从当前页面移除【'+name+'】按钮吗?', function(){
                jo.postAjax('{URL_UMS}ums/navigateButton/deleteByNavigateIdAndButtonId', {navigateId:joForm.formData.id, buttonId:id}, function(json){
                    if(json && json.code == 0){
                        jo.showMsg('移除成功', {icon:1});
                        loadButtonData();//移除成功后重新加载按钮信息
                    }else{
                        jo.showMsg('移除失败', {icon:2});
                    }
                }, true);
            });
        }
    }
    //编辑按钮信息
    function editButton(id){
        jo.showWin('/page/ums/buttonFormAtNavForm.html?id='+id, '80%', '80%', '编辑按钮', 'WIN_EDIT_BUTTON');
    }
    //格式化按钮状态
    function formatButtonState(state){
        if(state == '0'){
            return '<span class="label label-success">正常</span>';
        }else if(state == '1'){
            return '<span class="label label-danger">废弃</span>';
        }else{
            return state;
        }
    }
    //加载按钮表格
    function loadButtonData(){
        if(joForm.formData.id){
            //加载当前资源的按钮
            Grid('mainList').loadData('{URL_UMS}ums/button/getButtonListByNavigateId?navigateId=' + joForm.formData.id);
        }
    }
    layui.laydate.render({
        elem: '#createTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#updateTime' //注册日期控件
    });
    $(function(){
        var jParams = {
            "PKName" : "id",//主键属性名
            "saveAfter" : "toEdit",
            "addUrl" : "{URL_UMS}ums/navigate/insert",//新增
            "deleteUrl" : "{URL_UMS}ums/navigate/delete",//删除
            "updateUrl" : "{URL_UMS}ums/navigate/update",//修改
            "formDataUrl" : "{URL_UMS}ums/navigate/get",//查询
            //"readonly2Label" : true //只读转文本
        };
        joForm.initFormPage(jParams);//初始化
    });
    //初始化新增页面回调函数(在初始化按钮前发生)
    joForm.initFormPageOfAdd = function(){
        $("#parentId").val(jo.getUrlParam("navId"));
        $("#parentName").val(jo.getUrlParam("navName"));
    };
    //初始化表单值前处理
    joForm.initFormValueBefore = function(oJson){
        oJson.createTime = jo.formatDate(oJson.createTime);
        oJson.updateTime = jo.formatDate(oJson.updateTime);
    };
    //初始化表单值后处理
    joForm.initFormValueAfter = function(oJson){
        $("#iconShow").html('<i class="fa '+oJson.icon+'" aria-hidden="true"></i>');
        loadButtonData();//加载按钮表格
    };
    //新增请求提交前回调函数
    joForm.dealDataAtSaveBefore = function(oJson){

    };
    //修改请求提交前回调函数
    joForm.dealDataAtUpdateBefore = function(oJson){

    };
    /* 关于joForm更多回调函数和配置参数可查看jo-page-form.js */
    function setHref(str){
        $('#href').val(str);
    }
    //图标选择
    function iconSelectClick(sClass){
        $("#icon").val(sClass);
        $("#iconShow").html('<i class="fa '+sClass+'" aria-hidden="true"></i>');
        jo.close();
    }
</script>
</body>
</html>
